<template>
	<div class="homepage">
		<el-row class="row1">
		  <el-col class="col1" :span="12" style="padding-right: 8px;">
			<el-card class="box-card" style="height: 34vh;">
			    <h4>待审核</h4>
				<div class="daishen">
					<el-row class="row_1" v-for="(x,index) in tableData" :key="index">
						<el-col class="col_1" :span="6">
							<h5>姓名</h5>
							<span>{{x.userName}}</span>
						</el-col>
						<el-col class="col_1" :span="6">
							<h5>请假类</h5>
							<span>{{x.typeName}}</span>
						</el-col>
						<el-col class="col_1" :span="6">
							<h5>请假时间</h5>
							<span>{{x.createTime}}</span>
						</el-col>
						<el-col class="col_1" :span="6">
							<h5>操作</h5>
							<i @click="look">查看</i>
						</el-col>
					</el-row>
				</div>
			</el-card>
		  </el-col>
		  <el-col class="col1" :span="12" style="padding-left: 8px;">
			  <el-card class="box-card"  style="height: 34vh;">
			    <h4>学生信息</h4>
				<div class="daishen">
					<el-row class="row_1 row_child" v-for="(x,index) in tableinfo" :key="index">
						<el-col class="col_1" :span="4">
							<h5>姓名</h5>
							<span>{{x.stuName}}</span>
						</el-col>
						<el-col class="col_1" :span="4">
							<h5>学号</h5>
							<span>{{x.stuNum}}</span>
						</el-col>
						<el-col class="col_1" :span="4">
							<h5>性别</h5>
							<span>{{x.stuSex}}</span>
						</el-col>
						<el-col class="col_1" :span="4">
							<h5>监护人</h5>
							<span>{{x.stuPerson}}</span>
						</el-col>
						<el-col class="col_1" :span="4">
							<h5>年龄</h5>
							<span>{{x.stuAge}}</span>
						</el-col>
						<el-col class="col_1" :span="4">
							<h5>班级</h5>
							<span>{{x.clazzName}}</span>
						</el-col>
					</el-row>
				</div>
			  </el-card>
		  </el-col>
		</el-row>
		<div class="manager" style="height: 35vh;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
			<h4>班级管理</h4>
			<el-row class="row_2" v-for="(x,index) in tablemanage" :key="index">
				<el-col class="col_2" :span="4">
					<h5>编号</h5>
					<span>{{x.clazzNum}}</span>
				</el-col>
				<el-col class="col_2" :span="4">
					<h5>名称</h5>
					<span>{{x.clazzName}}</span>
				</el-col>
				<el-col class="col_2" :span="4">
					<h5>负责人</h5>
					<span>{{x.teaName}}</span>
				</el-col>
				<el-col class="col_2" :span="4">
					<h5>上课教室</h5>
					<span>{{x.clazzRoom}}</span>
				</el-col>
				<el-col class="col_2" :span="4">
					<h5>班级人数</h5>
					<span>{{x.num}}</span>
				</el-col>
				<el-col class="col_2" :span="4">
					<h5>操作</h5>
					<i @click="details">详情</i>
					<i @click="edit">修改</i>
					<i @click="dele(index)">删除</i>
				</el-col>
			</el-row>
		</div>
		
	</div>
</template>

<script>
	export default{
		data() {
			return{
				baseUrl:require("../js/baseUrl.js").baseUrl,
				// username:sessionStorage.getItem("userId"),
				// roleName:sessionStorage.getItem("roleName")
				tableData: [],
				tableinfo: [],
				tablemanage:[]
			}
		},
		methods:{
			look(){
				this.$router.push('/approvalmanager')
			},
			details(){
				this.$router.push("/classmanager")
			},
			edit(){
				this.$router.push("/classmanager")
			},
			dele(options){
				this.$router.push("/classmanager")
			}
		},
		mounted() {
			//待审核
			// /SchoolSys/stu/select
			this.$http.post(this.baseUrl+"SchoolSys/uloa/searchUloa",{
				pageIndex:1,
				pageSize:3
			}).then(res=>{
				// console.log(res.data.data.data)
				this.tableData=res.data.data.data
			}).catch(function(res){
				// console.log("请假管理请求失败原因是:"+res.message)
			})
			//学生管理
			//SchoolSys/stu/select
			this.$http.post(this.baseUrl+"SchoolSys/stu/select",{
				pageIndex:1,
				pageSize:3
			}).then(res=>{
				// console.log(res.data.data.data)
				this.tableinfo=res.data.data.data
			}).catch(function(res){
				// console.log("学生管理请求失败原因是:"+res.message)
			})
			//班级管理
			// /SchoolSys/clazz/select
			this.$http.post(this.baseUrl+"SchoolSys/clazz/select",{
				pageIndex:1,
				pageSize:3
			}).then(res=>{
				// console.log(res.data.data.data)
				this.tablemanage=res.data.data.data
			}).catch(function(res){
				// console.log("班级管理请求失败原因是:"+res.message)
			})
		}
	}
	
</script>

<style>
	.homepage{
		padding: 40px;
	}
	/* .homepage .row1 {
		margin-top: 20px;
		margin-left: 20px;
		margin-right: 20px;
	} */
	.homepage .row1 .col1{
		border-radius: 5px;
	}
	/* 两个上面 卡片 */
	.homepage .el-card__body, .el-main{
		padding: 15px;
		padding-left: 10px;
		padding-right: 10px;
		border-radius: 30px;
	}
	.homepage .row1 .col1 h4{
		text-align: center;
		margin-bottom: 15px;
	}
	/* 上面的俩表 */
	/* 1表 */
	.homepage .row_1{
		text-align: center;
		background-color: #f6fafd;
		margin-bottom: 5px;
		border-radius: 5px;
	}
	.homepage .row_1:nth-of-type(even){
		background-color: #fdf3f6;
	}
	.homepage .row_1 .col_1 span{
		margin-top: 8px;
		margin-bottom: 10px;
		display: inline-block;
		font-size: 13px;
		color: gray;
	}
	.homepage .row_1 .col_1 i{
		border: none;
		color: #2aafec;
		margin-top: 6px;
	}
	.homepage .row_1 .col_1 h5{
		margin-top: 5px;
	}
	/* 2表 */
	.homepage .row_child:nth-of-type(even){
		background-color: #fafdf3;
	}
	
	/* 班级管理 */
	.homepage .manager{
		margin-top: 15px;
		text-align: center;
		background-color: #ffffff;
		padding-bottom: 40px;
		padding-top: 10px;
		/* margin-left: 20px;
		margin-right: 20px; */
	}
	.homepage .manager h4{
		padding-top: 10px;
		padding-bottom: 20px;
	}
	.homepage .manager .row_2{
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
		border-radius: 10px;
		background-color: #f6fafd;
	}
	.homepage .manager .row_2:nth-of-type(even){
		background-color: #fdf3f6;
	}
	.homepage .manager .row_2 .col_2 h5{
		margin-top: 10px;
	}
	.homepage .manager .row_2 .col_2 span{
		font-size: 13px;
		color: gray;
		display: inline-block;
		margin-top: 8px;
		margin-bottom: 10px;
	}
	.homepage .manager .row_2 .col_2 i{
		border: none;
		margin-top: 5px;
		margin-right: 10px;
	}
	.homepage .manager .row_2 .col_2 i:nth-of-type(1){
		color: #2aafec;
	}
	.homepage .manager .row_2 .col_2 i:nth-of-type(2){
		color: limegreen;
	}
	.homepage .manager .row_2 .col_2 i:nth-of-type(3){
		color: orangered;
	}
	.homepage i{
		cursor: pointer;
		font-style: normal;
		font-size: 13px;
		display: inline-block;
		margin-top: 8px;
	}
	
</style>